// 期货合约信息
import React from 'react';
import { connect } from 'dva';
import { NoDataMaskC } from '../../../../comps';
import { Spin } from 'antd';
import mystyle from './index.less';
import accounting from 'accounting';
import moment from 'moment';
class FuturesInfoC extends React.Component {
  state = {
    masking: true, //是否显示蒙版
    info: {}, //信息
  };

  componentDidMount() {
    this.getInfo(this.props);
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    const { tradingcode, exchangecode } = this.props;
    if (tradingcode != nextProps.tradingcode || exchangecode != nextProps.exchangecode) {
      if (nextProps.tradingcode && nextProps.exchangecode) {
        this.setState(
          {
            info: {},
          },
          () => {
            this.getInfo(nextProps);
          },
        );
      } else {
        this.setState({
          info: {},
        });
      }
    }
  }

  //获取数据
  getInfo = (obj) => {
    const { dispatch } = this.props;
    const { tradingcode, exchangecode } = obj;
    if (!tradingcode) return;
    dispatch({
      type: 'stockIndexM/queryFuturesInfo',
      payload: {
        tradingCode: tradingcode,
        exchangeCode: exchangecode,
      },
      callback: (data) => {
        this.setState(
          {
            info: data || {},
          },
          () => {
            this.props.onChange(this.state.info);
          },
        );
      },
    });
  };

  //格式化数据
  formatData = (value, unit, number) => {
    if (value == undefined || value == null) {
      return '--';
    } else {
      if (unit == '%') {
        return parseFloat(value * 100).toFixed(2) + unit;
      } else {
        return accounting.formatNumber(value, number) + (unit || '');
      }
    }
  };
  render() {
    const { loading, tradingcode } = this.props;
    const { info } = this.state;
    return (
      <div>
        <Spin spinning={loading.effects['stockIndexM/queryFuturesInfo'] == true}>
          <div className={mystyle.wrapper}>
            <div className={mystyle.content}>
              <div className={mystyle.itemRow}>
                <div>合约标的</div>
                <div>{info.indexType || '--'}</div>
              </div>
              <div className={mystyle.itemRow}>
                <div>合约代码</div>
                <div>{tradingcode || '--'}</div>
              </div>
              <div className={mystyle.itemRow}>
                <div>合约多头保证金比例</div>
                <div>{this.formatData(info.marginMoneyD, '%', 2)}</div>
              </div>
              <div className={mystyle.itemRow}>
                <div>合约空头保证金比例</div>
                <div>{this.formatData(info.marginMoneyK, '%', 2)}</div>
              </div>
              <div className={mystyle.itemRow}>
                <div>合约乘数</div>
                <div>{info.contractMultiplie ? `每点${info.contractMultiplie}元` : '--'}</div>
              </div>
              <div className={mystyle.itemRow}>
                <div>最小变动价位</div>
                <div>{this.formatData(info.minQuatationUnit, '点', 2)}</div>
              </div>
              <div className={mystyle.itemRow}>
                <div>最后交易日</div>
                <div>{info.deliveryDay ? moment(info.delistDate).format('YYYY-MM-DD') : '--'}</div>
              </div>
              <div className={mystyle.itemRow}>
                <div>交割日期</div>
                <div>{info.deliveryDay ? moment(info.deliveryDay).format('YYYY-MM-DD') : '--'}</div>
              </div>

              <div className={`${mystyle.itemRow}`}>
                <div>每日价格最大波动限制</div>
                <div title={info.maxLimit || '--'}>{info.maxLimit || '--'}</div>
              </div>
            </div>
            {!tradingcode ? <NoDataMaskC height={'100%'} title={'请选择合约代码，加载数据！'} /> : null}
          </div>
        </Spin>
      </div>
    );
  }
}

export default connect(({ stockIndexM, loading }) => ({ stockIndexM, loading }))(FuturesInfoC);
